<template>
  <div class="user-list">
    <h4>用户列表</h4>
    <!-- 搜索部分 -->
    <div class="search">
      <el-input
        placeholder="请输入内容"
        v-model="keywords"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="primary">添加用户</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="$store.state.userList" border style="width: 100%">
     <el-table-column
      label="#"
      type="index"
      width="50">
    </el-table-column>
      <el-table-column fixed prop="username" label="姓名">
      </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mobile" label="电话">
      </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column prop="create_time" label="注册时间">
          <template slot-scope="scope">
             {{scope.row.create_time | filterTime}}
          </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="状态"> 
        <template slot-scope="scope">
            <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
         
          <el-button type="primary" circle  size="small" icon="el-icon-edit">
            
          </el-button>
          <el-button type="danger" circle  size="small" icon="el-icon-delete">
            
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
import moment from 'moment'
export default {
  data() {
    return {
      keywords: "", //搜索的关键字
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    // 获取json里面的数据
    getUserList() {
      axios.get("userlist.json").then((res) => {
        console.log(res);
        this.$store.commit("setUserList", res.data.data.users);
      });
    },
  },
  filters:{
    filterTime(val){
           moment.locale('zh-cn') //设置语言
        return moment(val).format('YYYY:MM:DD hh:mm:ss a')

    }
  }
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  margin: 10px;
  .el-input {
    width: 500px;
  }
}
</style>
